<template>
  <div class="page-container">
    <div class="header">
      <el-icon :size="20" class="back-icon" @click="goBack">
        <ArrowLeft />
      </el-icon>
      <h1>我的客服</h1>
      <div class="header-right"></div>
    </div>
    
    <div class="content">
      <!-- 客服信息卡片 -->
      <el-card class="service-info-card">
        <div class="service-header">
          <div class="service-avatar">
            <el-icon :size="40"><Service /></el-icon>
          </div>
          <div class="service-info">
            <h3>健研社客服中心</h3>
            <p>工作时间：9:00 - 21:00</p>
          </div>
        </div>
      </el-card>

      <!-- 快速咨询 -->
      <div class="section-title">快速咨询</div>
      <el-card class="quick-questions-card">
        <div 
          v-for="item in quickQuestions" 
          :key="item.id"
          class="question-item"
          @click="selectQuestion(item)"
        >
          <div class="question-content">
            <el-icon :size="20" class="question-icon">
              <ChatDotRound />
            </el-icon>
            <span class="question-text">{{ item.question }}</span>
          </div>
          <el-icon class="arrow-icon"><ArrowRight /></el-icon>
        </div>
      </el-card>

      <!-- 联系方式 -->
      <div class="section-title">联系方式</div>
      <el-card class="contact-card">
        <div class="contact-item" @click="callPhone">
          <div class="contact-left">
            <div class="contact-icon-wrapper phone-icon">
              <el-icon :size="24"><Phone /></el-icon>
            </div>
            <div class="contact-info">
              <div class="contact-label">客服热线</div>
              <div class="contact-value">400-123-4567</div>
            </div>
          </div>
          <el-icon class="arrow-icon"><ArrowRight /></el-icon>
        </div>
        
        <el-divider style="margin: 16px 0;" />
        
        <div class="contact-item" @click="goToChatRoom">
          <div class="contact-left">
            <div class="contact-icon-wrapper wechat-icon">
              <el-icon :size="24"><ChatDotSquare /></el-icon>
            </div>
            <div class="contact-info">
              <div class="contact-label">在线客服</div>
              <div class="contact-value">点击进入聊天室</div>
            </div>
          </div>
          <el-icon class="arrow-icon"><ArrowRight /></el-icon>
        </div>
        
        <el-divider style="margin: 16px 0;" />
        
        <div class="contact-item" @click="sendEmail">
          <div class="contact-left">
            <div class="contact-icon-wrapper email-icon">
              <el-icon :size="24"><Message /></el-icon>
            </div>
            <div class="contact-info">
              <div class="contact-label">客服邮箱</div>
              <div class="contact-value">service@jianyanshe.com</div>
            </div>
          </div>
          <el-icon class="arrow-icon"><ArrowRight /></el-icon>
        </div>
      </el-card>

      <!-- 在线留言 -->
      <div class="section-title">在线留言</div>
      <el-card class="message-card">
        <el-form :model="messageForm" label-position="top">
          <el-form-item label="您的问题">
            <el-input
              v-model="messageForm.content"
              type="textarea"
              :rows="5"
              placeholder="请详细描述您遇到的问题，我们会尽快回复..."
              maxlength="500"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="联系方式（可选）">
            <el-input
              v-model="messageForm.contact"
              placeholder="请留下您的手机号或微信，方便我们回复"
              clearable
            />
          </el-form-item>
          <el-button 
            type="primary" 
            :loading="submitting"
            @click="submitMessage"
            style="width: 100%;"
          >
            提交留言
          </el-button>
        </el-form>
      </el-card>
    </div>

    <!-- 问题详情对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="selectedQuestion?.question"
      width="90%"
      center
    >
      <div class="answer-content">
        <p>{{ selectedQuestion?.answer }}</p>
      </div>
      <template #footer>
        <el-button type="primary" @click="dialogVisible = false">
          知道了
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { 
  ArrowLeft, 
  ArrowRight, 
  Service, 
  ChatDotRound,
  ChatDotSquare,
  Phone, 
  Message 
} from '@element-plus/icons-vue'

const router = useRouter()

// 快速问题列表
const quickQuestions = ref([
  {
    id: 1,
    question: '如何预约教练？',
    answer: '您可以在"教练"页面浏览所有教练信息，点击心仪的教练进入详情页，然后点击"立即预约"按钮。填写预约信息后提交，等待教练确认即可。'
  },
  {
    id: 2,
    question: '如何进行实名认证？',
    answer: '进入"我的"页面，点击"实名认证"，按照提示填写真实姓名和身份证号码，上传身份证正反面照片。提交后我们会在1-3个工作日内完成审核。'
  },
  {
    id: 3,
    question: '预约成功后如何联系教练？',
    answer: '预约成功后，您可以在"动态"页面的预约记录中查看教练联系方式，也可以通过站内消息与教练沟通。'
  },
  {
    id: 4,
    question: '可以取消预约吗？',
    answer: '可以的。在预约时间24小时前取消不收取任何费用。在"动态"页面找到对应的预约记录，点击"取消预约"即可。24小时内取消可能会产生违约费用。'
  },
  {
    id: 5,
    question: '忘记密码怎么办？',
    answer: '在登录页面点击"忘记密码"，输入您的手机号，通过短信验证码即可重置密码。如有问题请联系客服协助处理。'
  }
])

// 选中的问题
const selectedQuestion = ref(null)
const dialogVisible = ref(false)

// 留言表单
const messageForm = ref({
  content: '',
  contact: ''
})
const submitting = ref(false)

const goBack = () => {
  router.back()
}

const selectQuestion = (item) => {
  selectedQuestion.value = item
  dialogVisible.value = true
}

const callPhone = () => {
  ElMessage.success('客服热线：400-123-4567')
  // 在真实环境中可以使用 window.location.href = 'tel:400-123-4567'
}

const goToChatRoom = () => {
  router.push('/chatroom')
}

const sendEmail = () => {
  ElMessage.info('客服邮箱：service@jianyanshe.com')
  // 在真实环境中可以使用 window.location.href = 'mailto:service@jianyanshe.com'
}

const submitMessage = () => {
  if (!messageForm.value.content.trim()) {
    ElMessage.warning('请输入您的问题')
    return
  }
  
  submitting.value = true
  
  // 模拟提交
  setTimeout(() => {
    submitting.value = false
    ElMessage.success('留言提交成功！我们会尽快回复您')
    messageForm.value = {
      content: '',
      contact: ''
    }
  }, 1000)
  
  // 实际开发中这里应该调用 API
  // try {
  //   await submitCustomerMessage(messageForm.value)
  //   ElMessage.success('留言提交成功！我们会尽快回复您')
  //   messageForm.value = { content: '', contact: '' }
  // } catch (error) {
  //   ElMessage.error('提交失败，请稍后重试')
  // } finally {
  //   submitting.value = false
  // }
}
</script>

<style scoped>
.page-container {
  min-height: 100%;
  background-color: #f5f7fa;
}

.header {
  background: white;
  padding: 0 16px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.header h1 {
  flex: 1;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  text-align: center;
}

.back-icon {
  cursor: pointer;
  color: #606266;
  transition: color 0.3s;
  padding: 4px;
}

.back-icon:hover {
  color: #409eff;
}

.header-right {
  width: 28px;
}

.content {
  padding: 20px 16px;
  min-height: calc(100vh - 56px);
}

/* 客服信息卡片 */
.service-info-card {
  margin-bottom: 24px;
}

.service-info-card :deep(.el-card__body) {
  padding: 20px;
}

.service-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
}

.service-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.service-info h3 {
  margin: 0 0 6px 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.service-info p {
  margin: 0;
  font-size: 14px;
  color: #909399;
}

/* 分段标题 */
.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 28px 0 14px 0;
  padding-left: 4px;
}

/* 快速问题卡片 */
.quick-questions-card {
  margin-bottom: 24px;
}

.quick-questions-card :deep(.el-card__body) {
  padding: 8px 20px;
}

.question-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px;
  cursor: pointer;
  transition: all 0.3s;
  border-bottom: 1px solid #f0f0f0;
}

.question-item:last-child {
  border-bottom: none;
}

.question-item:hover {
  background-color: #f5f7fa;
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
}

.question-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.question-icon {
  color: #409eff;
}

.question-text {
  font-size: 15px;
  color: #303133;
}

.arrow-icon {
  color: #c0c4cc;
  font-size: 16px;
}

/* 联系方式卡片 */
.contact-card {
  margin-bottom: 24px;
}

.contact-card :deep(.el-card__body) {
  padding: 8px 20px;
}

.contact-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.contact-item:hover {
  opacity: 0.8;
}

.contact-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.contact-icon-wrapper {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.phone-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.wechat-icon {
  background: linear-gradient(135deg, #09c35b 0%, #0da557 100%);
}

.email-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.contact-info {
  flex: 1;
}

.contact-label {
  font-size: 15px;
  color: #303133;
  margin-bottom: 6px;
  font-weight: 500;
}

.contact-value {
  font-size: 14px;
  color: #909399;
}

/* 留言卡片 */
.message-card {
  margin-bottom: 32px;
}

.message-card :deep(.el-card__body) {
  padding: 24px 20px;
}

:deep(.el-form-item__label) {
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
}

:deep(.el-textarea__inner) {
  border-radius: 8px;
}

:deep(.el-input__inner) {
  border-radius: 8px;
}

/* 对话框样式 */
.answer-content {
  padding: 20px 0;
  line-height: 1.8;
  color: #606266;
  font-size: 15px;
}

:deep(.el-dialog) {
  border-radius: 12px;
}

:deep(.el-dialog__header) {
  padding: 20px 20px 10px;
}

:deep(.el-dialog__title) {
  font-size: 16px;
  font-weight: 600;
}

:deep(.el-dialog__body) {
  padding: 10px 20px 20px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .service-header {
    flex-direction: row;
  }
  
  .section-title {
    font-size: 15px;
    margin: 20px 0 10px 0;
  }
}
</style>

